<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row type="flex">
          <a-col >
            <a-button icon="plus" style="margin-right: 20px" type="primary" @click="openAdd()">新增</a-button>
            <a-divider style="margin-right: 20px" type="vertical" />
          </a-col>
          <a-col flex="220px">
            <a-form-item label="地区筛选">
              <!--              <a-select v-model="queryParam.type" placeholder="请选择地区">-->
              <!--                <a-select-option value="">所有</a-select-option>-->
              <!--                <a-select-option value="0">国内</a-select-option>-->
              <!--                <a-select-option value="1">国际</a-select-option>-->
              <!--              </a-select>-->
              <a-radio-group v-model="queryParam.type">
                <!--                <a-radio value="">所有</a-radio>-->
                <a-radio value="0" @click="isTooltipShow">国内</a-radio>
                <a-radio value="1" @click="isTooltipShow">国际</a-radio>
              </a-radio-group>

            </a-form-item>
          </a-col>
          <a-col >
            <a-form-item label="类型选择">
              <!--              <a-select v-model="queryParam.type" placeholder="请选择地区">-->
              <!--                <a-select-option value="">所有</a-select-option>-->
              <!--                <a-select-option value="0">国内</a-select-option>-->
              <!--                <a-select-option value="1">国际</a-select-option>-->
              <!--              </a-select>-->
              <a-radio-group v-model="queryParam.isDlpf">
                <!--                <a-radio value="">所有</a-radio>-->
                <a-radio value="0" @click="isTooltipShow">碳强度</a-radio>
                <a-radio value="1" @click="isTooltipShow">电力排放因子</a-radio>
              </a-radio-group>

            </a-form-item>
          </a-col>
          <a-col flex="auto">
            <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;margin-right: 20px">
<!--              <a-button icon="search" type="primary" @click="searchQuery">查询</a-button>-->
              <a-popover :overlayStyle="{background: 'white'}" :visible="tooltipShow" placement="topLeft">
                <template slot="content">
                  <a-icon theme="twoTone" two-tone-color="#52c41a" type="exclamation-circle" /><span
                  style="margin-left: 5px">可以点击重置来重新筛选结果</span>
                </template>
                <a-button
                  icon="reload"
                  style="margin-left: 8px"
                  @click="searchReset"
                >重置</a-button>
              </a-popover>

            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
    </div>
    <div>
      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="ipagination"
        :rowSelection="rowSelection"
        bordered
        rowKey="id"
        size="middle"
        @change="handleTableChange">
        <span slot="type" slot-scope="text, record">
          <a-tag v-if="text == '0'" color="red">国内</a-tag>
          <a-tag v-if="text == '1'" color="blue">国际</a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button style="margin-right: 10px" type="primary" @click="handleEdit(record)">
            编辑
          </a-button>
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a-button>
                删除
              </a-button>
            </a-popconfirm>
        </span>
      </a-table>
    </div>
    <analysis-modal ref="modalForm" @ok="modalFormOk"></analysis-modal>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import AnalysisModal from '@views/dataVisualization/components/analysisModal'
import { postAction } from '@api/manage'

export default {
  name: 'comparativeAnalysis',
  components: { AnalysisModal },
  mixins: [JeecgListMixin],
  data() {
    return {
      queryParam: {
        isDlpf: '0'
      },
      selectedRowKeys: [],
      rowSelection: {
        columnTitle: '前台展示',
        columnWidth: 100,
        onSelect: (record, selected, selectedRows) => {
          this.onChangeStatus(record, selected, selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.cityName === "上海" || record.cityName === "中国"
          },
        })
      },
      tooltipShow: false,
      columns: [
        {
          title: '城市',
          align: 'center',
          dataIndex: 'cityName',
          width: 200
        },
        {
          title: '范围',
          align: 'center',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
          width: 200
        },
        {
          title: '碳强度(吨CO₂/万元)',
          align: 'center',
          dataIndex: 'carbonNum'
          // width: 100
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 300,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/carbon/carbonOverviewComparativeAnalysis/list',
        delete: '/carbon/carbonOverviewComparativeAnalysis/delete',
        edit: '/carbon/carbonOverviewComparativeAnalysis/edit'
      }
    }
  },
  watch: {
    dataSource: {
      handler() {
        this.getSelectList();
      },
      deep: true,
    },
  },
  methods: {
    isTooltipShow() {
      if (!this.tooltipShow) {
        this.tooltipShow = !this.tooltipShow
        setTimeout(() => {
          this.tooltipShow = !this.tooltipShow
        }, 3000)
      }
      setTimeout(() => {
        this.searchQuery()
      }, 50)

    },
    openAdd() {
      this.$refs.modalForm.edit()
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
    handleEdit: function(record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
    },
    getSelectList() {
      // 基于status值设置selectedRowKeys
      this.selectedRowKeys = this.dataSource
        .filter(record => record.status === '1')
        .map(record => record.id);

      console.log(this.selectedRowKeys)

      // 更新rowSelection对象，确保表格知道哪些行被选中
      this.rowSelection = {
        ...this.rowSelection,
        selectedRowKeys: this.selectedRowKeys,
        // 在这里，可以继续保留其他rowSelection属性和方法
      };
    },
    onChangeStatus(record) {
      record.status = record.status === '0' ? '1' : '0';
      let that = this
      let httpurl = this.url.edit
      let formData = record
      postAction(httpurl, formData).then(res => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('refresh')
        } else {
          that.$message.error(res.message)
        }
      }).finally(() => {
        that.loadData()
      })
    },
  },
}
</script>

<style lang="stylus" scoped>

</style>